<template>
    <component is="a-modal" v-model:visible="visible" width="70%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <div style="height: 70vh;overflow-y: scroll;">
            <div style="color:#1e90ff;font-size: 16px;margin-top:10px">订单</div>
            <a-table :pagination="false" :columns="columns" :data="paramsData.orderGoods" :stripe="true"
                style="margin-top:10px">
                <template #goods_name="{ record }">
                    <div>{{ record.goods_name }}({{ record.goods_type_text }})</div>
                </template>
                <template #price="{ record }">
                    <div>{{ record.price }} <text v-if="record.goods_type != 'common' && record.goods_type != 'common2'">¥{{
                            record.price_cny }}</text></div>
                </template>
            </a-table>
            <div style="color:#1e90ff;font-size: 16px;margin-top:10px">支付记录</div>
            <a-table :pagination="false" :columns="columns_2" :data="paramsData.payList" :stripe="true"
                style="margin-top:10px">
                <template #pay_num="{ record }">
                    <div><text v-if="record.money_code == 'CNY' ? '¥' : ''"></text> {{ record.pay_num }}</div>
                </template>
            </a-table>
            <a-descriptions title="" bordered :column="4" style="margin-top: 20px;">
                <a-descriptions-item label="结算业绩ID:" :span="1">{{ paramsData?.yejiTotal?.three_tid
                    }}</a-descriptions-item>
                <a-descriptions-item label="结算业绩条数" :span="1">{{ paramsData?.yejiTotal?.yeji_num
                    }}</a-descriptions-item>
                <a-descriptions-item label="结算业绩订单额" :span="2">{{ paramsData?.yejiTotal?.yeji_order_total
                    }}</a-descriptions-item>
                <a-descriptions-item label="支付的购物积分" :span="1">{{ paramsData?.pay_total?.ucn2 }}</a-descriptions-item>
                <a-descriptions-item label="支付的兑换积分" :span="1">{{ paramsData?.pay_total?.ucn3 }}</a-descriptions-item>
                <a-descriptions-item label="使用的礼品卡" :span="1">{{ paramsData?.pay_total?.gift_card
                    }}</a-descriptions-item>
                <a-descriptions-item label="在线的支付金额" :span="1">{{ paramsData?.pay_total?.line_pay
                    }}</a-descriptions-item>
            </a-descriptions>
            <div v-if="mode=='refund'">
                <a-alert style="margin-top: 20px;font-size: 14px;" :show-icon="false">
                扣除业绩条数之后：<br />
                1、会自动判断降低等级和处理填写的退回积分<br />
                2、奖励部分需要手动人为去调整
                </a-alert>
                <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="margin-top: 20px;">
                    <a-form-item label="状态" field="type">
                        <sa-radio v-model="formData.type"  :data="STATE"></sa-radio>
                    </a-form-item>
                    <a-form-item label="扣除报单条数" field="vip_tiaoshu">
                        <a-input-number v-model="formData.vip_tiaoshu" hide-button placeholder="这里填多少，就扣对应结算业绩里面多少条数"></a-input-number>
                    </a-form-item>
                    <a-form-item label="退回多少购物积分" field="return_ucn2">
                        <a-input-number v-model="formData.return_ucn2" hide-button placeholder="这里填多少，就给会员增加多少购物积分"></a-input-number>
                    </a-form-item>
                    <a-form-item label="退回多少兑换积分" field="return_ucn3">
                        <a-input-number v-model="formData.return_ucn3" hide-button placeholder="这里填多少，就给会员增加多少兑换积分"></a-input-number>
                    </a-form-item>
                    <a-form-item label="退回多少礼品卡" field="lipinka">
                        <a-input-number v-model="formData.lipinka" hide-button placeholder="这里填多少，就给会员增加多少礼品卡"></a-input-number>
                    </a-form-item>
                    <a-alert style="margin: 20px 0;font-size: 14px;" :show-icon="false">
                        在线支付的金额,请线下退回
                    </a-alert>
                    <a-form-item label="线下退款金额(RMB)" field="refund_offline_price">
                        <a-input-number v-model="formData.refund_offline_price" hide-button placeholder="这里填线下退款金额多少 仅做记录使用不参与实际退款" ></a-input-number>
                    </a-form-item>
                    
                    <a-form-item label="操作密码" field="admin_pay_password">
                        <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="谷歌验证码" field="google_code">
                        <a-input v-model="formData.google_code" placeholder="请输入" />
                    </a-form-item>
                </a-form>
            </div>
            <div v-else>
                <div style="color:#1e90ff;font-size: 16px;margin-top:10px">退款记录</div>
                <a-table :pagination="false" :columns="columns_3" :data="paramsData.refundLog" :stripe="true"
                    style="margin-top:10px">
                    <template #pay_num="{ record }">
                        <div><text v-if="record.money_code == 'CNY' ? '¥' : ''"></text> {{ record.pay_num }}</div>
                    </template>
                </a-table>
            </div>
        </div>




    </component>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import mallApi from '@/api/system/mall'
import SaRadio from '@cps/sa-radio/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import tool from '@/utils/tool'
const emit = defineEmits(["success"]);
const visible = ref(false);
const title = ref('整单全退')
const mode=ref('')
const loading = ref(false);
const formRef = ref()
const STATE = [
    { value: 1, title: '整单全退' },
    { value: 2, title: '部分退款' }
]
const formData = reactive({
    id: '', 
    type: 1,
    vip_tiaoshu: '',
    return_ucn2: '',
    return_ucn3: '',
    lipinka: '',
    refund_offline_price: '',
    admin_pay_password: '',
    google_code:'',
})
const rules = ref({
    type: [{ required: true, message: '请输入' }],
    vip_tiaoshu: [{ required: true, message: '请输入' }],
    return_ucn2: [{ required: true, message: '请输入' }],
    return_ucn3: [{ required: true, message: '请输入' }],
    lipinka: [{ required: true, message: '请输入' }],
    refund_offline_price: [{ required: true, message: '请输入' }],
    google_code: [{ required: true, message: '请输入' }],
    admin_pay_password: [{ required: true, message: '请输入' }],
});
const columns = [
    { title: '产品名称', slotName: 'goods_name', width: 150, align: 'center' },
    { title: '购买数量', dataIndex: 'number', width: 150, align: 'center' },
    { title: '价格', slotName: 'price', width: 150, align: 'center' },
    { title: '规格', dataIndex: 'sku_text', width: 150, align: 'center' },
]
const columns_2 = [
    { title: '支付方式', dataIndex: 'method_text', width: 150, align: 'center' },
    { title: '支付金额', slotName: 'pay_num', width: 150, align: 'center' },
    { title: '时间', dataIndex: 'create_time', width: 150, align: 'center' },
]
const columns_3 = [
    { title: '退款类型', dataIndex: 'type_text', width: 150, align: 'center' },
    { title: '扣除报单条数', dataIndex: 'yeji_num', width: 150, align: 'center' },
    { title: '退回多少购物积分', dataIndex: 'return_vip_point', width: 150, align: 'center' },
    { title: '退回多少兑换积分', dataIndex: 'return_common_point', width: 150, align: 'center' },
    { title: '退回多少礼品卡', dataIndex: 'return_lipinka', width: 150, align: 'center' },
    { title: '线下退款金额(RMB)', dataIndex: 'amount', width: 150, align: 'center' },
    { title: '管理员', dataIndex: 'admin_name', width: 150, align: 'center' },
    { title: '处理时间', dataIndex: 'create_time', width: 180, align: 'center',fixed:'right' },
]
const open = async (type = '', data) => {
    mode.value=type
    formData.id = data.id
    if (mode.value == 'refund') {
        formRef.value.resetFields();
        title.value='整单全退'
        getParams()
    } else { 
        getParams_log()
        title.value='退款记录'
    }
    visible.value = true;
}
const paramsData = ref({})
const getParams = async () => {
    const { data } = await mallApi.mall_refund_info(formData.id)
    paramsData.value = { ...data }
    formData.vip_tiaoshu = data?.yejiTotal?.yeji_num
    formData.return_ucn2 = data?.pay_total?.ucn2
    formData.return_ucn3 = data?.pay_total?.ucn3
    formData.lipinka = data?.pay_total?.gift_card   
}
const getParams_log = async () => { 
    const { data } = await mallApi.mall_refundlog_info(formData.id)
    paramsData.value = { ...data }
}
// 数据保存
const submit = throttle(async (done) => {
  const validate = await formRef.value?.validate()
  if (!validate) {
    loading.value = true
    try {
      let data = { ...formData }
      let result = {}
      result = await mallApi.refund(data)
      if (result.code === 200) {
        Message.success(result.msg || '操作成功')
        emit('success')
        done(true)
      }
      // 防止连续点击提交
      setTimeout(() => {
        loading.value = false
      }, 500)
    } catch {
      loading.value = false
    }
  }
  done(false)
}, 100)
defineExpose({ open });
</script>